<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>テキストリンク・ホバー時に画像を切り替えるサンプル</title>

<style>
#imageup-out {
	float: left;
	width: 300px;
	margin-right: 20px;
	margin-bottom: 15px;
}

#imageup {
	border: 1px #878787 solid;
	margin-left: auto;
	height: 180px;
	position: relative;
	margin-right: auto;
}
#imageup ul {
	margin-bottom: 0px;
	margin-top: 10px;
	padding: 0px;
}
#imageup ul li {
	list-style: none;
	margin-bottom: 5px;
}

#imageup ul li a {
	height: 15px;
	line-height: 15px;
	outline: none;
}

#imageup ul li a:link,
#imageup ul li a:visited {
	z-index: 50;
	text-decoration: underline;
}
#imageup ul li a:hover,
#imageup ul li a:active,
#imageup ul li a:focus {
	border: 1px solid #FFFFFF;
	outline: none;
	text-decoration: none;
}

#imageup ul li a em {
  display: none;
}
#imageup ul li a:hover em,
#imageup ul li a:active em,
#imageup ul li a:focus em {
	position: absolute;
	top: 0;
	left: 0px;
	display: block;
	width: 150px;
	z-index: 50;
	height: 150px;
}

#imageup ul li a:hover span {
	color: #FF3399;
	z-index: 100;
	line-height: 15px;
	height: 15px;
	outline: none;
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	position: relative;
	right: 1px;
}
#imageup ul li a:hover img {
	display: inline;
	border: 1px solid #FFFFFF;
}

.box {
	display: block;
	float: left;
	height: 150px;
	margin-right: 30px;
}
.box img {
	border: 1px solid #EEEEEE;
}
</style>
</head>
<body>



<!-- <li><a href="index.html"><em><img src="切替わる表示画像" /></em><span>テキスト</span></a></li> -->
<div id="imageup-out">
<div id="imageup">
<div class="box">
<img src="images/mokyumokyu-150x150.jpg" alt="デフォルト表示されてる画像" width="150" height="150" />
</div>
	<ul>
		<li><a href="index.html"><em><img src="images/mokyumokyu01.jpg" width="150" height="150" /></em><span>テキスト</span></a></li>
		<li><a href="index.html"><em><img src="images/mokyumokyu02.jpg" width="150" height="150" /></em><span>テキスト</span></a></li>
		<li><a href="index.html"><em><img src="images/mokyumokyu03.jpg" width="150" height="150" /></em><span>テキスト</span></a></li>
		<li><a href="index.html"><em><img src="images/mokyumokyu04.jpg" width="150" height="150" /></em><span>テキスト</span></a></li>
		<li><a href="index.html"><em><img src="images/mokyumokyu05.jpg" width="150" height="150" /></em><span>テキスト</span></a></li>
	</ul>
<!-- imageup end --></div>
<!-- imageup-out end --></div>



<div id="imageup-out">
<div id="imageup">
<div class="box">
<img src="images/mokyumokyu-150x150.jpg" alt="test" />
</div>
	<ul>
		<li><a href="index.html"><em><img src="images/mokyumokyu01.jpg" width="150" height="150" /></em><span>テキスト</span></a></li>
		<li><a href="index.html"><em><img src="images/mokyumokyu02.jpg" width="150" height="150" /></em><span>テキスト</span></a></li>
		<li><a href="index.html"><em><img src="images/mokyumokyu03.jpg" width="150" height="150" /></em><span>テキスト</span></a></li>
		<li><a href="index.html"><em><img src="images/mokyumokyu04.jpg" width="150" height="150" /></em><span>テキスト</span></a></li>
		<li><a href="index.html"><em><img src="images/mokyumokyu05.jpg" width="150" height="150" /></em><span>テキスト</span></a></li>
	</ul>
<!-- imageup end --></div>
<!-- imageup-out end --></div>



<div id="imageup-out">
<div id="imageup">
<div class="box">
<img src="images/mokyumokyu-150x150.jpg" alt="test" />
</div>
	<ul>
		<li><a href="index.html"><em><img src="images/mokyumokyu01.jpg" width="150" height="150" /></em><span>テキスト</span></a></li>
		<li><a href="index.html"><em><img src="images/mokyumokyu02.jpg" width="150" height="150" /></em><span>テキスト</span></a></li>
		<li><a href="index.html"><em><img src="images/mokyumokyu03.jpg" width="150" height="150" /></em><span>テキスト</span></a></li>
		<li><a href="index.html"><em><img src="images/mokyumokyu04.jpg" width="150" height="150" /></em><span>テキスト</span></a></li>
		<li><a href="index.html"><em><img src="images/mokyumokyu05.jpg" width="150" height="150" /></em><span>テキスト</span></a></li>
	</ul>
<!-- imageup end --></div>
<!-- imageup-out end --></div>



<div id="imageup-out">
<div id="imageup">
<div class="box">
<img src="images/mokyumokyu-150x150.jpg" alt="test" />
</div>
	<ul>
		<li><a href="index.html"><em><img src="images/mokyumokyu01.jpg" width="150" height="150" /></em><span>テキスト</span></a></li>
		<li><a href="index.html"><em><img src="images/mokyumokyu02.jpg" width="150" height="150" /></em><span>テキスト</span></a></li>
		<li><a href="index.html"><em><img src="images/mokyumokyu03.jpg" width="150" height="150" /></em><span>テキスト</span></a></li>
		<li><a href="index.html"><em><img src="images/mokyumokyu04.jpg" width="150" height="150" /></em><span>テキスト</span></a></li>
		<li><a href="index.html"><em><img src="images/mokyumokyu05.jpg" width="150" height="150" /></em><span>テキスト</span></a></li>
	</ul>
<!-- imageup end --></div>
<!-- imageup-out end --></div>





</body>
</html>